<template>
  <a-tabs v-model="key" @change="callback">
    <a-tab-pane v-for="pane in tabPaneData" :key="pane[fieldData.id]">
      <span slot="tab" class="tab-title" @contextmenu.prevent="tabOnContextMenu">
        {{ lang == 'zh' ? pane[fieldData.name] : pane[fieldData.enName] }}
        <div class="taskNum" v-if="parseInt(pane[fieldData.num]) > 0">{{ pane[fieldData.num] }}</div>
      </span>
    </a-tab-pane>
    <a-button v-if="custom" slot="tabBarExtraContent" @click="addTab">+</a-button>
  </a-tabs>
</template>
<script>
  export default {
    props: {
      defaultTagId: {
        type: String | Number,
        default: ''
      },
      tabPaneData: {
        type: Array,
        default: () => []
      },
      // 是否可以自定义页签
      custom: {
        type: Boolean,
        default: true
      },
      fieldData: {
        type: Object,
        default: function() {
          return {
            name: 'tagName',
            enName: 'tagEnName',
            id: 'tagId',
            num: 'num'
          }
        }
      }
    },
    data() {
      return {
        key: this.defaultTagId,
        lang: this.$store.state.i18nData.lang || 'zh',
      }
    },
    watch: {
      defaultTagId(val) {
        this.key = val
      },
      '$store.state.i18nData.lang': function(v) {
        this.lang = v
      },
    },
    methods: {
      callback(key) {
        this.key = key
        this.$emit('change', key)
      },
      tabOnContextMenu(e) {
        this.$emit('tabOnContextMenu', e)
      },
      addTab() {
        this.$emit('addTab')
      }
    }
  }
</script>
<style scoped lang="less">
  /deep/ .ant-tabs-nav {
    display: flex;
  }
  // /deep/ .ant-tabs-nav .ant-tabs-tab {
  //   padding: 5px 9px;
  // }
  .tab-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 130px;
  }
  /deep/ .taskNum {
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    background-color: #f5222d;
    margin: -15px 0px 0px 5px;
    padding: 0px 3px 0px 3px;
    line-height: 18px;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
  }
</style>